<template>
  <div class="container">
    <h3 class="title"><span />网站基本设置</h3>
    <el-tabs id="tabcard" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本设置" name="basic">
        <el-form ref="basicForm" :model="basicForm" class="form" label-width="140px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="选择语言:">
                <el-select v-model="lang" placeholder="请选择" @change="changLang">
                  <el-option
                    v-for="item in langList"
                    :key="item.id"
                    :label="item.lang"
                    :value="item.lang"
                  />
                </el-select>
              </el-form-item>
              <el-form-item size="small" label="网站logo:">
                <div class="attachmentBtn">
                  <el-upload
                    :headers="myHeaders"
                    class="avatar-uploader"
                    :action="$store.getters.updateURL+'attachment/uploadAndSave'"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    :before-upload="beforeAvatarUpload"
                    :data="{type:2}"
                  >
                    <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
                  </el-upload>
                  <el-button
                    size="small"
                    class="blue"
                    type="primary"
                    icon="el-icon-s-unfold"
                    @click="openList"
                  >选择附件</el-button>
                </div>
                <div class="imgBox">
                  <img v-if="basicForm.logo" :src="imageUrl" class="attachmentImg">
                </div>

                <BouncedDialog title="选择附件" :dialog-show.sync="dialogShow" :width="70" class="attachment">
                  <el-table
                    v-el-table-infinite-scroll="load"
                    :data="attachmentData"
                    border
                    :header-cell-style="{'text-align':'center','background-color':'#fff'}"
                    :cell-style="{'text-align':'center'}"
                  >
                    <el-table-column label="ID" prop="id" width="60px" />
                    <el-table-column label="预览">
                      <template slot-scope="scope">
                        <el-image
                          :src="scope.row.url"
                          alt=""
                          class="attachmentImg"
                          :preview-src-list="scope.row.list"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column label="文件名" prop="name" />
                    <el-table-column label="文件大小" prop="size" width="100px" />
                    <el-table-column label="Mime类型" prop="mime_type" width="100px" />
                    <el-table-column label="创建日期" prop="create_time" width="160px" />
                    <el-table-column label="操作" width="120px">
                      <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-check" @click="choose(scope.row)">选择</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </BouncedDialog>
              </el-form-item>
              <el-form-item prop="site_name" label="网站名称:">
                <el-input v-model="basicForm.site_name" />
              </el-form-item>
              <el-form-item prop="icp" label="ICP备案号:">
                <el-input v-model="basicForm.icp" />
              </el-form-item>
              <el-form-item prop="icp_link" label="ICP备案号链接:">
                <el-input v-model="basicForm.icp_link" />
              </el-form-item>
              <el-form-item prop="gwa" label="公安备案号:">
                <el-input v-model="basicForm.gwa" />
              </el-form-item>
              <el-form-item prop="gwa_link" label="公安备案号链接:">
                <el-input v-model="basicForm.gwa_link" />
              </el-form-item>
            </el-col>
            <el-col :span="12">

              <el-form-item prop="author" label="作者:">
                <el-input v-model="basicForm.author" />
              </el-form-item>
              <el-form-item prop="site_email" label="站长邮箱:">
                <el-input v-model="basicForm.admin_email" />
              </el-form-item>
              <el-form-item prop="customer_code" label="客服代码:">
                <el-input
                  v-model="basicForm.customer_code"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 5 }"
                />
              </el-form-item>
              <el-form-item prop="analytics_code" label="统计代码:">
                <el-input
                  v-model="basicForm.analytics_code"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 5 }"
                />
              </el-form-item>
              <el-form-item prop="seo_title" label="Title:">
                <el-input v-model="basicForm.seo_title" />
              </el-form-item>
              <el-form-item prop="seo_keywords" label="Keyword:">
                <el-input v-model="basicForm.seo_keywords" />
              </el-form-item>
              <el-form-item prop="seo_description" label="Description:">
                <el-input
                  v-model="basicForm.seo_description"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button class="save" type="primary" size="small" @click="save">保存</el-button>
          </el-form-item>

        </el-form>

      </el-tab-pane>
      <el-tab-pane label="语言设置" name="lang">
        <Lang v-if="activeName == 'lang'" :website-id="websiteId" />
      </el-tab-pane>
      <el-tab-pane label="服务器设置" name="server">
        <Server v-if="activeName == 'server'" :website-id="websiteId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
var token = 'Bearer ' + getToken()
import websiteApi from '@/api/website'
import websettingApi from '@/api/websetting'
import Lang from './components/lang.vue'
import Server from './components/server.vue'
import attachmentApi from '@/api/system/attachment'
export default {
  components: { Lang, Server },
  data() {
    return {
      attachmentLimit: 10,
      dialogShow: false,
      attachmentData: [],
      imagelist: [],
      myHeaders: { Authorization: token },
      headers: {},
      imageUrl: '',
      imgUrl: this.$store.getters.updateURL,
      options: [], // 站点
      activeName: 'basic',
      websiteId: '',
      searchForm: {
        website_id: ''
      },
      basicForm: {
        icp: '',
        icp_link: '',
        gwa: '',
        gwa_link: '',
        author: '',
        site_email: '',
        analytics_code: '',
        cutomer_code: ''
      },
      langList: [],
      lang: '',
      siteId: ''

    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val

      this.getLang()
    }
  },
  created() {
    // this.getWeblist()
    this.siteId = this.$store.getters.siteId
    if (this.siteId) {
      this.getLang()
    }
  },
  methods: {
    load() {
      this.attachmentLimit += 10
      this.getAttachmentList()
    },
    // 打开附件弹窗
    openList() {
      this.dialogShow = true
      this.getAttachmentList()
    },
    // 附件列表
    getAttachmentList() {
      const val = {
        limit: this.attachmentLimit,
        page: 1,
        type: 2
      }
      attachmentApi.attachmentList(val).then(res => {
        if (res.code == 0) {
          this.attachmentData = res.data
          this.imagelist = []
          // 获取每张图片的地址
          for (var x = 0;x < this.attachmentData.length;x++) {
            this.imagelist.push(this.attachmentData[x].url)
          }
          // 根据图片顺序（index）更改每张图片绑定的list的图片顺序
          for (var i = 0;i < this.attachmentData.length;i++) {
            var container = this.imagelist
            var frontArr = container.slice(0, i)
            var begindArr = container.slice(i, this.attachmentData.length)
            var list = begindArr.concat(frontArr)
            this.attachmentData[i].list = list
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 选择附件
    choose(row) {
      this.basicForm.logo = row.id
      this.imageUrl = row.url
      this.dialogShow = false
    },

    // 切换语言
    changLang(val) {
      this.lang = val
      this.getBasciInfo()
    },
    // 获取语言
    getLang() {
      websettingApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data

        if (res.data.length > 0) {
          this.lang = res.data[0].lang
        }
        this.getBasciInfo()
      })
    },
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      this.getLang()
    },

    // 获取基本信息
    getBasciInfo() {
      const val = {
        website_id: this.siteId,
        lang: this.lang
      }
      // if (this.siteId && this.lang) {
      websettingApi.basicInfo(val).then(res => {
        if (res.code == 0) {
          this.basicForm = res.data.setting
          this.imageUrl = res.data.setting.logo.url
          this.basicForm.logo = res.data.setting.logo.id
        }
      })
      // }
    },
    // 封面照片上传成功
    handleSuccess(res, file, fileList, objbind) {
      if (res.code == -200 || res.code == 0) {
        this.imageUrl = URL.createObjectURL(file.raw)
        this.basicForm.logo = res.data.id
      }
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      // const isPNG = file.type === 'image/png'
      // const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG && !isPNG) {
      //   this.$message.error('上传logo只能是 JPG或PNG 格式!')
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传logo大小不能超过 1MB!')
      // }
      // return (isJPG || isPNG) && isLt2M
    },
    // 保存编辑
    save() {
      this.$refs.basicForm.validate((valid) => {
        if (valid) {
          const val = {
            website_id: this.siteId,
            lang: this.lang,
            setting: this.basicForm
          }
          websettingApi.basicUpdate(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getBasciInfo()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    }
  }
}
</script>

<style lang='scss'>
  .attachment .el-dialog{
    height: 640px;
  }
</style>
<style scoped lang='scss'>
// .el-table{
//   .attachment{
//     width: 60px;
//   }
// }
.form{
  width: 95%;
  // max-width: 700px;
  margin-top: 20px;
  .el-select{
    width: 100%;
  }
}
.search{
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
}
.avatar{
  width: 150px;
}

</style>
